<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>资讯</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link type="text/css" rel="stylesheet" href="/static/v1/css/notice/demo.css"/>
    <style>
        .layui-container {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: #F2F2F2;
        }
    </style>
</head>
<body>
<div class="layui-container" style="">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;text-align: center">
        <legend><h1 th:text="${notice.title}"></h1></legend>
    </fieldset>
    <div class="layui-card">
        <div class="layui-card-header">
            <p style="color: #d3ecf2">
                <span th:text="${notice.createTime} "></span>
                <span th:text="${notice.createUser} "></span>
                <span th:text="${notice.subTitle} "></span>
            </p>
        </div>
        <div class="layui-card-body">
            <p th:utext="${notice.content}"></p>
        </div>
    </div>
    <div class="layui-row">
        <div class="praise">
            <span id="praise"><img src="/static/v1/img/zan.png" id="praise-img"/></span>
            <span id="praise-txt" th:text="${notice.clickCount}"></span>
            <span id="add-num"><em>+1</em></span>
        </div>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'laytpl', 'util'], function () {

        var $ = layui.$;
        var util = layui.util;


        $("#praise").click(function () {
            var praise_img = $("#praise-img");
            var text_box = $("#add-num");
            var praise_txt = $("#praise-txt");
            var num = parseInt(praise_txt.text());
            if (praise_img.attr("src") == ("/static/v1/img/yizan.png")) {
                $(this).html("<img src='/static/v1/img/zan.png' id='praise-img' class='animation' />");
                praise_txt.removeClass("hover");
                text_box.show().html("<em class='add-animation'>-1</em>");
                $(".add-animation").removeClass("hover");
                num -= 1;
                praise_txt.text(num)
            } else {
                $(this).html("<img src='/static/v1/img/yizan.png' id='praise-img' class='animation' />");
                praise_txt.addClass("hover");
                text_box.show().html("<em class='add-animation'>+1</em>");
                $(".add-animation").addClass("hover");
                num += 1;
                praise_txt.text(num)
            }
        });
        //执行
        util.fixbar({
            bar1: '<i class="layui-icon layui-icon-home"></i>',
            click: function (type) {
                if (type === 'bar1') {
                    var localUrl = window.location.href;

                    var qrUrl = "/rest/base/qr?content=";
                    var downUrl = localUrl;

                    layer.photos({
                        photos: {"data": [{"src": qrUrl + downUrl}]}
                        , anim: 5
                    });
                }
            }
        });

    });
</script>
</body>
</html>